<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="id=edge">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/reset.css">
    <title>京东首页</title>
</head>

<body>
    <div class="container">
        <div class="nav">
            <div class="nav-box">
                <ul>
                    <li><a href="#">免费注册</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">我的京东</a></li>
                    <li><a href="#">京东会员</a></li>
                    <li><a href="#">企业采购</a></li>
                    <li><a href="#">客户服务</a></li>
                    <li><a href="#">网站导航</a></li>
                    <li><a href="#">手机京东</a></li>

                </ul>
            </div>
        </div>
        <div class="header-box">
            <div class="header">
                <div class="logo-box">
                    <a href="http://jd.com">
                        <img width="190" height="120" src="https://img10.360buyimg.com/img/jfs/t1/160510/16/25709/36032/616cea7eEd14780cc/43b0d9ed8c9e9ab0.png" alt="">
                    </a>
                </div>
                <div class="search-box">
                    <div class="search-bar">
                        <input type="text" placeholder="请输入查询商品">
                        <div class="search-btn">
                            <span class="iconfont iconfont-search">&#xe61e;</span>
                        </div>
                        <div class="cart-btn">
                            <span class="iconfont iconfont-cart">&#xe70b;</span> 我的购物车
                        </div>
                    </div>

                    <ul class="recommend">
                        <li><a href="#" target="_blank">二手手机</a></li>
                        <li><a href="#" target="_blank">199减100</a></li>
                        <li><a href="#" target="_blank">暖心配件</a></li>
                        <li><a href="#" target="_blank">家电补贴</a></li>
                        <li><a href="#" target="_blank">12.12元</a></li>
                        <li><a href="#" target="_blank">每100-50</a></li>
                        <li><a href="#" target="_blank">美妆护肤</a></li>
                        <li><a href="#" target="_blank">冬季养殖</a></li>
                    </ul>
                    <ul>
                        <li><a href="#" target="_blank">秒杀</a></li>
                        <li><a href="#" target="_blank">优惠券</a></li>
                        <li><a href="#" target="_blank">PLUS会员</a></li>
                        <li><a href="#" target="_blank">品牌闪购</a></li>
                        <li><a href="#" target="_blank">拍卖</a></li>
                        <li><a href="#" target="_blank">京东时尚</a></li>
                        <li><a href="#" target="_blank">京东超市</a></li>
                        <li><a href="#" target="_blank">京东生鲜</a></li>
                        <li><a href="#" target="_blank">京东国际</a></li>
                        <li><a href="#" target="_blank">京东金融</a></li>
                    </ul>
                </div>
                <div class="ad-box">
                    <a href="http://jd.com" target="_blank">
                        <img width="190" height="120" src="http://img10.360buyimg.com/babel/jfs/t1/201412/14/13270/75235/61793c2fE7fda79de/487acf8035c4bb92.png.webp" alt="ad">
                    </a>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="warpper">
                <div class="menu-box" id="menu">
                    <ul>
                        <li>
                            <div class="main-menu">
                                <a href="#" target="_blank">家用电器 &gt;</a>
                            </div>
                            <div class="sub-menu">
                                <div class="left-box">
                                    <div class="menu-title">
                                        <a class="item" href="#" target="_blank">家电馆 &gt;</a>
                                        <a class="item" href="#" target="_blank">家用专卖店 &gt;</a>
                                        <a class="item" href="#" target="_blank">家电服务 &gt;</a>
                                        <a class="item" href="#" target="_blank">家电采购 &gt;</a>
                                        <a class="item" href="#" target="_blank">商用电器 &gt;</a>
                                        <a class="item" href="#" target="_blank">以旧换新 &gt;</a>
                                    </div>
                                    <dl>
                                        <dt>
                                            <a href="#" target="_blank">电视 &gt;</a>
                                        </dt>
                                        <dd>
                                            <a href="#" target="_blank">超薄电视</a>
                                            <a href="#" target="_blank">全面屏电视</a>
                                            <a href="#" target="_blank">OLD电视</a>
                                            <a href="#" target="_blank">智慧屏电视</a>
                                            <a href="#" target="_blank">55寸电视</a>
                                            <a href="#" target="_blank">65寸电视</a>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt>
                                            <a href="#" target="_blank">电视 &gt;</a>
                                        </dt>
                                        <dd>
                                            <a href="#" target="_blank">超薄电视</a>
                                            <a href="#" target="_blank">全面屏电视</a>
                                            <a href="#" target="_blank">OLD电视</a>
                                            <a href="#" target="_blank">智慧屏电视</a>
                                            <a href="#" target="_blank">55寸电视</a>
                                            <a href="#" target="_blank">65寸电视</a>
                                            <a href="#" target="_blank">超薄电视</a>
                                            <a href="#" target="_blank">全面屏电视</a>
                                            <a href="#" target="_blank">OLD电视</a>
                                            <a href="#" target="_blank">智慧屏电视</a>
                                            <a href="#" target="_blank">55寸电视</a>
                                            <a href="#" target="_blank">65寸电视</a>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt>
                                            <a href="#" target="_blank">电视 &gt;</a>
                                        </dt>
                                        <dd>
                                            <a href="#" target="_blank">超薄电视</a>
                                            <a href="#" target="_blank">全面屏电视</a>
                                            <a href="#" target="_blank">OLD电视</a>
                                            <a href="#" target="_blank">智慧屏电视</a>
                                            <a href="#" target="_blank">55寸电视</a>
                                            <a href="#" target="_blank">65寸电视</a>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="right-box">
                                    <div class="pic-box">
                                        <a href="#" target="_blank">
                                            <img src="http://img12.360buyimg.com/da/s380x300_jfs/t1/113307/20/2352/67526/5ea13b49E86d0db9e/62967ccc2eb66e7e.png.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="pic-box">
                                        <a href="#" target="_blank">
                                            <img src="http://img12.360buyimg.com/da/s380x300_jfs/t1/113307/20/2352/67526/5ea13b49E86d0db9e/62967ccc2eb66e7e.png.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="pic-box">
                                        <a href="#" target="_blank">
                                            <img src="http://img12.360buyimg.com/da/s380x300_jfs/t1/113307/20/2352/67526/5ea13b49E86d0db9e/62967ccc2eb66e7e.png.webp" alt="">
                                        </a>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="main-menu">
                                <a href="#" target="_blank">家用电器2 &gt;</a>
                            </div>
                            <div class="sub-menu">
                                <div class="left-box">
                                    <div class="menu-title">
                                        <a class="item" href="#" target="_blank">家电馆2 &gt;</a>
                                        <a class="item" href="#" target="_blank">家用专卖店2 &gt;</a>
                                        <a class="item" href="#" target="_blank">家电服务2 &gt;</a>
                                        <a class="item" href="#" target="_blank">家电采购2 &gt;</a>
                                        <a class="item" href="#" target="_blank">商用电器2 &gt;</a>
                                        <a class="item" href="#" target="_blank">以旧换新2 &gt;</a>
                                    </div>
                                    <dl>
                                        <dt>
                                            <a href="#" target="_blank">电视 &gt;</a>
                                        </dt>
                                        <dd>
                                            <a href="#" target="_blank">超薄电视</a>
                                            <a href="#" target="_blank">全面屏电视</a>
                                            <a href="#" target="_blank">OLD电视</a>
                                            <a href="#" target="_blank">智慧屏电视</a>
                                            <a href="#" target="_blank">55寸电视</a>
                                            <a href="#" target="_blank">65寸电视</a>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt>
                                            <a href="#" target="_blank">电视 &gt;</a>
                                        </dt>
                                        <dd>
                                            <a href="#" target="_blank">超薄电视</a>
                                            <a href="#" target="_blank">全面屏电视</a>
                                            <a href="#" target="_blank">OLD电视</a>
                                            <a href="#" target="_blank">智慧屏电视</a>
                                            <a href="#" target="_blank">55寸电视</a>
                                            <a href="#" target="_blank">65寸电视</a>
                                            <a href="#" target="_blank">超薄电视</a>
                                            <a href="#" target="_blank">全面屏电视</a>
                                            <a href="#" target="_blank">OLD电视</a>
                                            <a href="#" target="_blank">智慧屏电视</a>
                                            <a href="#" target="_blank">55寸电视</a>
                                            <a href="#" target="_blank">65寸电视</a>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt>
                                            <a href="#" target="_blank">电视 &gt;</a>
                                        </dt>
                                        <dd>
                                            <a href="#" target="_blank">超薄电视</a>
                                            <a href="#" target="_blank">全面屏电视</a>
                                            <a href="#" target="_blank">OLD电视</a>
                                            <a href="#" target="_blank">智慧屏电视</a>
                                            <a href="#" target="_blank">55寸电视</a>
                                            <a href="#" target="_blank">65寸电视</a>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="right-box">
                                    <div class="pic-box">
                                        <a href="#" target="_blank">
                                            <img src="http://img12.360buyimg.com/da/s380x300_jfs/t1/113307/20/2352/67526/5ea13b49E86d0db9e/62967ccc2eb66e7e.png.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="pic-box">
                                        <a href="#" target="_blank">
                                            <img src="http://img12.360buyimg.com/da/s380x300_jfs/t1/113307/20/2352/67526/5ea13b49E86d0db9e/62967ccc2eb66e7e.png.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="pic-box">
                                        <a href="#" target="_blank">
                                            <img src="http://img12.360buyimg.com/da/s380x300_jfs/t1/113307/20/2352/67526/5ea13b49E86d0db9e/62967ccc2eb66e7e.png.webp" alt="">
                                        </a>
                                    </div>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="main-menu">
                                <a href="#" target="_blank">家用电器3 &gt;</a>
                            </div>
                            <div class="sub-menu">
                                <div class="left-box">
                                    <div class="menu-title">
                                        <a class="item" href="#" target="_blank">家电馆3 &gt;</a>
                                        <a class="item" href="#" target="_blank">家用专卖店3 &gt;</a>
                                        <a class="item" href="#" target="_blank">家电服务3 &gt;</a>
                                        <a class="item" href="#" target="_blank">家电采购3 &gt;</a>
                                        <a class="item" href="#" target="_blank">商用电器3 &gt;</a>
                                        <a class="item" href="#" target="_blank">以旧换新3 &gt;</a>
                                    </div>
                                    <dl>
                                        <dt>
                                            <a href="#" target="_blank">电视 &gt;</a>
                                        </dt>
                                        <dd>
                                            <a href="#" target="_blank">超薄电视</a>
                                            <a href="#" target="_blank">全面屏电视</a>
                                            <a href="#" target="_blank">OLD电视</a>
                                            <a href="#" target="_blank">智慧屏电视</a>
                                            <a href="#" target="_blank">55寸电视</a>
                                            <a href="#" target="_blank">65寸电视</a>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt>
                                            <a href="#" target="_blank">电视 &gt;</a>
                                        </dt>
                                        <dd>
                                            <a href="#" target="_blank">超薄电视</a>
                                            <a href="#" target="_blank">全面屏电视</a>
                                            <a href="#" target="_blank">OLD电视</a>
                                            <a href="#" target="_blank">智慧屏电视</a>
                                            <a href="#" target="_blank">55寸电视</a>
                                            <a href="#" target="_blank">65寸电视</a>
                                            <a href="#" target="_blank">超薄电视</a>
                                            <a href="#" target="_blank">全面屏电视</a>
                                            <a href="#" target="_blank">OLD电视</a>
                                            <a href="#" target="_blank">智慧屏电视</a>
                                            <a href="#" target="_blank">55寸电视</a>
                                            <a href="#" target="_blank">65寸电视</a>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt>
                                            <a href="#" target="_blank">电视 &gt;</a>
                                        </dt>
                                        <dd>
                                            <a href="#" target="_blank">超薄电视</a>
                                            <a href="#" target="_blank">全面屏电视</a>
                                            <a href="#" target="_blank">OLD电视</a>
                                            <a href="#" target="_blank">智慧屏电视</a>
                                            <a href="#" target="_blank">55寸电视</a>
                                            <a href="#" target="_blank">65寸电视</a>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="right-box">
                                    <div class="pic-box">
                                        <a href="#" target="_blank">
                                            <img src="http://img12.360buyimg.com/da/s380x300_jfs/t1/113307/20/2352/67526/5ea13b49E86d0db9e/62967ccc2eb66e7e.png.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="pic-box">
                                        <a href="#" target="_blank">
                                            <img src="http://img12.360buyimg.com/da/s380x300_jfs/t1/113307/20/2352/67526/5ea13b49E86d0db9e/62967ccc2eb66e7e.png.webp" alt="">
                                        </a>
                                    </div>
                                    <div class="pic-box">
                                        <a href="#" target="_blank">
                                            <img src="http://img12.360buyimg.com/da/s380x300_jfs/t1/113307/20/2352/67526/5ea13b49E86d0db9e/62967ccc2eb66e7e.png.webp" alt="">
                                        </a>
                                    </div>
                                </div>

                            </div>
                        </li>
                    </ul>
                </div>
                <div class="slider-box">
                    <div class="slider" id="slider">
                        <ul class="clearfix">
                            <li>
                                <img width="590" height="470" src="./img/1.jpg" alt="1.jpg">
                            </li>
                            <li>
                                <img width="590" height="470" src="./img/2.jpg" alt="2.jpg">
                            </li>
                            <li>
                                <img width="590" height="470" src="./img/3.jpg" alt="3.jpg">
                            </li>
                            <li>
                                <img width="590" height="470" src="./img/4.jpg" alt="4.jpg">
                            </li>
                            <li>
                                <img width="590" height="470" src="./img/5.jpg" alt="5.jpg">
                            </li>
                        </ul>
                        <div class="left-box">
                            <span>&lt;</span>
                        </div>
                        <div class="right-box">
                            <span>&gt;</span>
                        </div>
                        <div class="index-box">
                            <ol></ol>
                        </div>
                    </div>
                </div>
                <div class="ad-box"></div>
                <div class="info-box"></div>
            </div>
        </div>

    </div>
    <script src="js/menu.js"></script>
    <script src="js/slider.js"></script>
    <script type="text/javascript">
        const menu = new Menu("#menu");
        const slider = new Slider("#slider");
    </script>

</body>

</html>